<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '投资收益',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部卡片 -->
    <view class="p-4">
      <view class="bg-black rounded-xl p-4 relative overflow-hidden">
        <!-- 金额 -->
        <view class="text-white text-2xl font-medium mb-6">¥1780.09</view>
        <!-- 虚线框 -->
        <view class="border border-dashed border-gray-600 w-16 h-16 rounded"></view>
        <!-- 右下角文字 -->
        <text class="absolute bottom-4 right-4 text-sm text-green-400">全部</text>
      </view>
    </view>

    <!-- 收益列表 -->
    <view class="px-4">
      <view v-for="(item, index) in earningsList" :key="index" class="bg-white rounded-xl mb-3 p-4">
        <view class="flex items-center justify-between">
          <!-- 左侧内容 -->
          <view class="flex-1">
            <view class="flex items-center gap-2">
              <!-- 箭头图标 -->
              <view class="flex">
                <uni-icons type="arrowleft" size="14" color="#666"></uni-icons>
                <uni-icons type="arrowright" size="14" color="#666"></uni-icons>
              </view>
              <!-- 标题和编号 -->
              <view>
                <view class="text-base font-medium">{{ item.title }}</view>
                <view class="text-xs text-gray-400 mt-1">快递柜编号 {{ item.number }}</view>
              </view>
            </view>
          </view>

          <!-- 右侧内容 -->
          <view class="text-right">
            <view class="text-green-500 font-medium">+${{ item.amount }}</view>
            <view class="text-xs text-gray-400 mt-1">{{ item.date }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const earningsList = [
  {
    title: '开柜收益',
    number: '000113',
    amount: '980',
    date: '02/12/2025',
  },
  {
    title: '寄件收益',
    number: '000113',
    amount: '980',
    date: '02/12/2025',
  },
  {
    title: '充值收益',
    number: '000113',
    amount: '980',
    date: '02/12/2025',
  },
  {
    title: '开柜收益',
    number: '000113',
    amount: '980',
    date: '02/12/2025',
  },
  {
    title: '开柜收益',
    number: '000113',
    amount: '980',
    date: '02/12/2025',
  },
]
</script>

<style lang="scss" scoped>
page {
  background-color: #f9fafb;
}

// 虚线框的样式
.border-dashed {
  border-color: rgba(255, 255, 255, 0.3);
  border-style: dashed;
  border-width: 1px;
}
</style>
